<script setup>
import File from "@/components/File.vue";
import {useFileListStore} from "@/stores/fileListStore.js";
import {useRightMenuStore} from "@/stores/rightMenu.js";
import RightMenu from "@/components/RightMenu.vue";
import {computed, onMounted, onUnmounted, ref} from "vue";
import {useKeyStore} from "@/stores/keyStore.js";
import {usePathNavigationStore} from "@/stores/pathNavigation.js";
import {usePreviewInfoStore} from "@/stores/previewInfoStore.js";
import {usePreviewStore} from "@/stores/previewStore.js";

window.addEventListener("popstate", function (event) {
    history.pushState(null, null, location.href);
});
history.pushState(null, null, location.href);

const fileListStore = useFileListStore();
const rightMenuStore = useRightMenuStore();
const keyStore = useKeyStore();

fileListStore.apiList()



const pageWidth = ref(window.innerWidth)
const gutterValue = computed(() => {
  return fileListStore.isMobileDevice() ? 10 : Math.ceil(pageWidth.value / window.screen.width * 100)
})
const spanValue = computed(() => {
  const ratio = Math.ceil(pageWidth.value / window.screen.width * 100);
  return fileListStore.isMobileDevice() ? 6 : (ratio > 50 ? 3 : 4)
})

/**
 * 显示右键菜单
 */
const showRightMenu = (event) => {
  event.preventDefault(); // 阻止默认的右键菜单
  if (event.target.closest('.rightMenu')) return
  const {pageX: pageX, pageY: pageY} = event; // 获取鼠标点击位置
  rightMenuStore.menuPosition = {x: pageX, y: pageY};
  rightMenuStore.showMenu = true; // 显示右键菜单
};

/**
 * 监听按键事件
 */
function handleKeyDown(event) {
  if (usePreviewStore().preShow) return;
  keyStore.addKeyDown(event.key)
  if (keyStore.keyDown(["Control", "a"])) {
    event.preventDefault();
    fileListStore.addAllFile()
    return
  }
  if (keyStore.keyDown(["Control", "q"])) {
    event.preventDefault();
    fileListStore.counterSelection()
    return
  }
  if(keyStore.keyDown(["Control", "Alt", "s"])){
    event.preventDefault();
    rightMenuStore.parallelDownloadZip()
    return
  }
  if(keyStore.keyDown(["Control", "s"])){
    event.preventDefault();
    rightMenuStore.download()
    return
  }
  if(keyStore.keyDown(["Control", "e"])){
    event.preventDefault();
    rightMenuStore.upload()
    return
  }
  if(keyStore.keyDown(["Control", "r"])){
    event.preventDefault();
    usePreviewInfoStore().info()
    return
  }
}

function handleKeyUp(event) {
  keyStore.delKeyDown(event.key)
}

async function handleMouseDown(event) {
  if(event.button === 3) {
    event.preventDefault();
    await usePathNavigationStore().goBack()
    console.log("go back")
    return
  }
  if(event.button === 4) {
    event.preventDefault();
    await usePathNavigationStore().goForward()
    console.log("go forward")
    return
  }
  if(!event.target.closest('.rightMenu')) rightMenuStore.showMenu = false
  fileListStore.handleMouseDown(event);
}

function handleMouseMove(event) {
  fileListStore.handleMouseMove(event);
}

function handleMouseUp(event) {
  fileListStore.handleMouseUp(event);
}

function handleDocumentClick(event) {
  fileListStore.handleDocumentClick(event);
}

function dragstartHandler(event) {
  fileListStore.dragstartHandler(event);
}

function resize() {
  pageWidth.value = window.innerWidth
}

/**
 * 组件挂载时添加事件监听器
 */
onMounted(() => {
  document.addEventListener('mousedown', handleMouseDown);
  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', handleMouseUp);
  document.addEventListener('click', handleDocumentClick);
  document.addEventListener('dragstart', dragstartHandler);
  document.addEventListener('contextmenu', showRightMenu);
  document.addEventListener('keydown', handleKeyDown); // 添加按键监听
  document.addEventListener('keyup', handleKeyUp); // 添加按键监听
  window.addEventListener('resize', resize); // 添加按键监听
});

/**
 * 组件卸载时移除事件监听器
 */
onUnmounted(() => {
  document.removeEventListener('mousedown', handleMouseDown);
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mouseup', handleMouseUp);
  document.removeEventListener('click', handleDocumentClick);
  document.removeEventListener('dragstart', dragstartHandler);
  document.removeEventListener('contextmenu', showRightMenu);
  document.removeEventListener('keydown', handleKeyDown); // 移除按键监听
  document.removeEventListener('keyup', handleKeyUp); // 移除按键监听
  window.removeEventListener('resize', resize); // 添加按键监听
});
</script>

<template>
    <el-row :gutter="gutterValue">
      <el-col v-for="item in fileListStore.loadFiles" :key="item.id" :span="spanValue" class="selectable-container">
        <div class="file-div">
          <File draggable="true"
                class="file"
                :file-obj="item"
                @mouseenter="fileListStore.handleMouseEnter"
                @mouseleave="fileListStore.handleMouseLeave"
                @dragover="fileListStore.handleDragOver"
                @drop="fileListStore.handleDrop"
                @dblclick="rightMenuStore.openFile()"
          />
        </div>
      </el-col>
    </el-row>
    <div id="preImg"></div>
    <RightMenu class="rightMenu" v-if="rightMenuStore.showMenu" :style="{
    position: 'absolute',
    top: `${rightMenuStore.menuPosition.y}px`,
    left: `${rightMenuStore.menuPosition.x}px`
  }"/>
</template>

<style>
.file-div {
  margin-top: 25px;
}

.file {
  margin-top: 25px;
  margin-bottom: 25px;
}
</style>